.check {
    background-color: $color-gray400;
    border: 2px solid $color-gray400;
    border-radius: 24px;
    cursor: pointer;
    height: 18px;
    overflow: hidden;
    position: relative;
    transition: all .2s linear;
    width: 32px;
    &.active {
        div {
            background-color: $color-link-primary;
            transition: all .2s linear;
            &::before {
                background-color: $color-white;
                left: calc(90% - 10px);
            }
        }
    }
    input {
        cursor: pointer;
        height: 18px;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        width: 32px;
        z-index: $first-layer;
    }
    div {
        height: 100%;
        position: relative;
        width: 100%;
        &::before {
            background-color: $color-white;
            border-radius: 50%;
            content: '';
            height: 10px;
            left: 10%;
            position: absolute;
            top: calc(50% - 5px);
            transition: all .2s linear;
            width: 10px;
        }
    }
    input:disabled,
    input:checked:disabled {
        cursor: auto;
        + div {
            opacity: .3;
        }
    }
    input:checked {
        + div {
            background-color: $color-link-primary;
            transition: all .2s linear;
            &::before {
                background-color: $color-white;
                left: calc(90% - 10px);
            }
        }

    }
}

// .check-toggle {
//     background-color: $grey-20;
//     &.active {
//         background-color: $grey-70;
//     }
// }
